<template>
  <view class="help-container">
    <view
        v-for="(item, findex) in list"
        :key="findex"
        :title="item.title"
        class="list-title"
    >
      <view class="text-title">
        <view :class="item.icon"></view>
        {{ item.title }}
      </view>
      <view class="childList">
        <view
            v-for="(child, zindex) in item.childList"
            :key="zindex"
            class="question"
            hover-class="hover"
            @click="handleText(child)"
        >
          <view class="text-item">{{ child.title }}</view>
          <view class="line" v-if="zindex !== item.childList.length - 1"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "iconfont icon-help",
          title: "账户与登录",
          childList: [
            {
              title: "如何退出登录？",
              content:
                  "请点击[我的] - [应用设置] - [退出登录]即可安全退出当前账户。",
            },
            {
              title: "如何修改用户头像？",
              content:
                  "请点击[我的] - [选择头像] - [点击提交]即可更换用户头像，支持JPG、PNG格式。",
            },
            {
              title: "如何修改登录密码？",
              content:
                  "请点击[我的] - [应用设置] - [修改密码] - [输入原密码和新密码]即可修改登录密码。",
            },
            {
              title: "忘记密码怎么办？",
              content:
                  '在登录页面点击"忘记密码"，通过注册邮箱或手机号验证后即可重置密码。',
            },
            {
              title: "一个账户可以在多台设备登录吗？",
              content:
                  "支持多设备同时登录，但为了账户安全，建议不要在不信任的设备上登录。",
            },
          ],
        },
        {
          icon: "iconfont icon-device",
          title: "设备连接",
          childList: [
            {
              title: "如何连接称重设备？",
              content:
                  "请确保设备蓝牙已开启，在APP中点击[设备] - [扫描设备] - [选择您的称重设备]完成连接。",
            },
            {
              title: "设备连接失败怎么办？",
              content:
                  "1.检查设备电量 2.重启蓝牙 3.将设备靠近手机 4.重启APP后重试连接。",
            },
            {
              title: "支持哪些称重设备？",
              content:
                  "支持主流蓝牙称重设备，包括XX品牌、YY品牌等，具体型号请查看设备兼容性列表。",
            },
            {
              title: "设备连接距离有限制吗？",
              content:
                  "蓝牙连接距离通常在10米以内，建议在无障碍物的环境下使用以确保连接稳定。",
            },
          ],
        },
        {
          icon: "iconfont icon-feature",
          title: "功能使用",
          childList: [
            {
              title: "如何新建称重记录？",
              content:
                  "在首页点击[新建称重]，连接设备后即可开始称重，系统会自动保存记录。",
            },
            {
              title: "数据会自动同步吗？",
              content:
                  "登录状态下数据会自动同步到云端，更换设备后也可以恢复之前的称重记录。",
            },
          ],
        },
        {
          icon: "iconfont icon-bug",
          title: "故障排除",
          childList: [
            {
              title: "APP闪退怎么办？",
              content:
                  "1.清理手机缓存 2.更新到最新版本 3.重启手机 4.卸载重装APP。",
            },
            {
              title: "称重数据不准确？",
              content:
                  "1.校准设备 2.确保设备放置平稳 3.检查设备电量 4.联系技术支持。",
            },
            {
              title: "数据同步失败？",
              content:
                  "检查网络连接，确保登录状态正常，如问题持续请联系技术支持。",
            }
          ],
        },
      ],
    };
  },
  methods: {
    handleText(item) {
      this.$tab.navigateTo(
          `/pages/common/textview/index?title=${item.title}&content=${item.content}`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.help-container {
  margin-bottom: 100rpx;
  padding: 30rpx;
}

.list-title {
  margin-bottom: 30rpx;
}

.childList {
  background: #ffffff;
  box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
  border-radius: 16rpx;
  margin-top: 10rpx;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #f5f5f5;
}

.text-title {
  color: #303133;
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 10rpx;

  .iconfont {
    font-size: 16px;
    margin-right: 10rpx;
  }
}

.text-item {
  font-size: 28rpx;
  padding: 24rpx;
}

.question {
  color: #606266;
  font-size: 28rpx;
}
</style>
